require(["config"],function(){
    require(["jquery","template","header","cookie"],function($,template){
        function Cart(){
            this.products=null;
            this.init();
           
        };
        $.extend(Cart.prototype,{
            init(){
                //渲染页面,读取cookie
                $.cookie.json=true;
                var products=this.products=$.cookie("products")||[];
               
                if(products.length === 0){//购物车为空
                    $(".empty").show().siblings(".no-empty").hide();
                }else{
                    //购物车非空
                    $(".empty").hide().siblings(".no-empty").show();
                    //渲染模板
                    var data = {
                        products:products
                    }
                   var html = template("cart-template",data);
                    $(".cart-table tbody").html(html);
                    this.calcTotal();
                    this.addListener();
                }
                //省市区三级级联
                this.loadAddress();
              
            },
              //注册事件监听
              addListener(){
                //删除
                $(".cart-table tbody").on("click",".x",$.proxy(this.delHandler,this))
                //+/-数量
                $(".cart-table tbody").on("click","#decr,#incr",$.proxy(this.decIncHandler,this))
                //全选
                $(".ck_all").on("click",$.proxy(this.ckAllHandler,this));
                //部分选中
                $(".cart-table tbody").on("click",".ck_prod",$.proxy(this.ckProdHandler,this))
                //相关选中
                $(".cart-table tbody").on("click",".ck_prod_title",this.ckProdTitle)
            },
            //删除单行
            delHandler:function(event){
                //dom元素
                var src =event.target;
                var tr = $(src).parents("tr")
                //获取商品id
                var id = tr.data("id");
                //从数组中删除该id对应的商品对象
                
                this.products= this.products.filter(function(prod){
                        return !(prod.id==id)
                        
                });
                  //从cookie中删除
                $.cookie("products",this.products,{expires:3,path:"/"})
                
              //从dom中删除行
                tr.remove();
                
                if(this.products.length === 0){//购物车为空
                    $(".empty").show().siblings(".no-empty").hide();
                }
                this.calcTotal()
            },
            //+/-数量
            decIncHandler:function(event){
                //事件源所在行(jquery实例)
                var src=event.target;
                var tr = $(src).parents("tr");
                //商品id
                var id= tr.data("id");
                var product=this.products.filter(function(prod){
                    return prod.id == id;
                })[0]//第一个元素
                //+/-数量
              if($(src).is("#decr")){
                  if(product.quantity <=1)
                  return;
                product.quantity--;
              }else{
                product.quantity++;
              }
              //保存到cookie中
              $.cookie("products",this.products,{expires:5,path:"/"})

              //页面渲染
              tr.find("#quantity").text(product.quantity);
              tr.find(".sub").text(product.price*product.quantity);
              this.calcTotal()
            },
            //全选处理
            ckAllHandler(event){
                var status = $(event.target).prop("checked");
              
                //将所有行前复选框设置为选中
                $(".ck_prod,.ck_prod_title").prop("checked",status);
                //计算合计
                this.calcTotal();

            
            },
            //部分选中时取消全选
            ckProdHandler:function(event){
                var status = $(event.target).prop("checked");
            
                $(event.target).parents("tr").prev("tr").find(".ck_prod_title").prop("checked",status);
                //获取购物车主体中处于选中的状态个数
               var count= $(".ck_prod:checked").length;
             
               //设置全选复选框的选中状态
               
               $(".ck_all").prop("checked",count===this.products.length)
               //计算合计
               this.calcTotal();
            },
            //相关选中
            ckProdTitle(event){
               // var src=event.target;
               // var status = $(src).prop("checked");
              
                //$(src).parents("tr").next("tr").find(".ck_prod").prop("checked",status);
                // this.ckProdHandler()
                $(this).parents("tr").next("tr").find(".ck_prod").trigger("click")
               
            },
            calcTotal(){
              
                var sum=0;
                $(".ck_prod:checked").each(function(){
                    
                    sum+=Number($(this).parents("tr").find(".sub").text())
                   
                })
               
                $(".total").text(sum);
            },
            //三级级联
            loadAddress:function(){
                this.loadProvince();
                //省份改变时,加载城市
                $(".province").on("change",this.loadCity);
                $(".city").on("change",this.loadDistrict)
            },
            loadProvince:function(){
                var url1="http://route.showapi.com/1149-1?showapi_appid=77828&showapi_sign=c84b430e59474eaaa4e2fc0fc62aa06e&level=1&page=1&maxSize=20",
                    url2="http://route.showapi.com/1149-1?showapi_appid=77828&showapi_sign=c84b430e59474eaaa4e2fc0fc62aa06e&level=1&page=2&maxSize=20";
                    $.when($.ajax(url1),$.ajax(url2)).done(function(data1,data2){
                        //初始选项
                        var html=`<option value="-1">请选择省份</option>`
                        //合并两次ajax数据
                        data1[0].showapi_res_body.data
                        .concat(data2[0].showapi_res_body.data)
                        .forEach(function(curr){
                            var id=curr.id;
                            html+=`<option value="${id}">${curr.areaName}</option>`

                        })
                       
                        $(".province").html(html);
                    })
            },
            loadCity:function(){
                //获取省份id
                var id =$(".province").val();
                
                var url =`http://route.showapi.com/1149-1?showapi_appid=77828&showapi_sign=c84b430e59474eaaa4e2fc0fc62aa06e&parentId=${id}&level=2`;
                $.ajax(url).done(function(data){
                    var html=`<option value="-1">请选择城市</option>`;                  
                   
                     data.showapi_res_body.data.forEach(function(curr){
                        html+=`<option value="${curr.id}">${curr.areaName}</option>`
                    });
                    $(".city").html(html);
                })

            },
            loadDistrict:function(){
                var id =$(".city").val();
                
                var url =`http://route.showapi.com/1149-1?showapi_appid=77828&showapi_sign=c84b430e59474eaaa4e2fc0fc62aa06e&parentId=${id}&level=3`;
                $.ajax(url).done(function(data){
                    var html=`<option value="-1">请选择区县</option>`;                  
                  
                     data.showapi_res_body.data.forEach(function(curr){
                        html+=`<option value="${curr.id}">${curr.areaName}</option>`
                    });
                     $(".district").html(html);
                })
            }



        });
        new Cart();
    });
})
